<script setup>
import { reactive } from 'vue'
import RegisterPage from './RegisterPage.vue'
import { useRouter } from 'vue-router'
import BaseHeader from '@/components/BaseHeader.vue'
import { useUserStore } from '@/stores/user'
import axiosInstance from '@/utils/request'
import { showFailToast } from 'vant'
//创建路由实例
const store = useUserStore()
const router = useRouter()
const data = reactive({
  isShow: false,
  username: '',
  password: ''
})
//显示注册表单
const onRegister = () => {
  data.isShow = true
}
//点击关闭图标
const onClickCloseIcon = () => {
  data.isShow = false
}
//跳转到忘记密码页面
const moveForgotPwd = () => {
  router.push('/forgotpwd')
}
//点击登录
const onLogin = () => {
  if (!data.username || !data.password) {
    showFailToast('账号或密码不能为空')
    return
  }
  axiosInstance
    .post('/user/login', {
      username: data.username,
      password: data.password,
      type: 0
    })
    .then((response) => {
      if (response.data.code === 200) {
        store.setToken(response.data.token)
        store.setUser(response.data.chatUser)
        router.replace('/')
      } else {
        showFailToast(response.data.msg)
      }
    })
    .catch((error) => {
      console.log(error)
    })
}
</script>
<template>
  <base-header></base-header>
  <div class="main">
    <h2 style="margin: 10px">欢迎回来!</h2>
    <h5
      style="
        font-weight: 700;
        color: #9da1a6;
        margin: 10px;
        font-size: 18px;
      "
    >
      请登录账号
    </h5>
  </div>
  <div style="margin-top: 40px">
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="data.username"
          name="账号"
          label="账号"
          placeholder="账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="data.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="display: flex; justify-content: flex-end">
        <span
          class="forgotpwd"
          @click="moveForgotPwd"
        >忘记密码?</span
        >
      </div>
      <div style="margin-top: 40px">
        <van-button
          style="width: 90%;margin: 0 auto; margin-bottom: 40px"
          round
          block
          type="primary"
          color="#0c34ba"
          @click="onLogin"
        >
          登录
        </van-button>
        <van-button
          round
          block
          type="primary"
          color="#FFFFFF"
          style="width: 90%;margin: 0 auto; color: #6d737a"
          @click="onRegister"
        >
          注册
        </van-button>
      </div>
    </van-form>
  </div>
  <register-page
    :show="data.isShow"
    @onClickCloseIcon="onClickCloseIcon"
  ></register-page>
</template>
<style scoped>
/* 主要部分 */
.main {
  margin-top: 70px;
}

.forgotpwd {
  font-size: 14px;
  color: #9c9c9c;
  padding-top: 15px;
  padding-right: 15px;
  cursor: pointer;
}

</style>
